<template>
  <div class="login_container">
    <img src="../assets/logo-treasure.svg" class="img" alt="" />
    <van-cell-group class="login_form">
      <van-field v-model="username" :label-width="50" left-icon="manager" label=" 账号 " clearable :error="isUserError"
        placeholder=" 请输入用户名 " @focus="focusHandle" @keypress.enter="handleLogin"/>
      <van-field v-model="password" left-icon="lock" :label-width="50" :error="isPassError" clearable type="password"
        label=" 密码 " placeholder=" 请输入密码 " @focus="focusHandle" @keypress.enter="handleLogin"/>
    </van-cell-group>
    <p class="login_register">
      <router-link to="/forget" class="go_register"> 忘记密码
      </router-link>
    </p>
    <p class="login-no">
      还没有账号，去
      <router-link to="/register" class="go_register"> 注册</router-link>
    </p>
    <van-button class="login_btn" type="primary" :loading="showLoading" loading-type="spinner" block
      :loading-text="message" @click="handleLogin"> 登录
    </van-button>
  </div>
</template>
<script>
import { Toast } from "vant";
import md5 from 'js-md5';
export default {
  name: '查看订单',
  data() {
    return {
      isUserError: false, // 账号为空时显示
      isPassError: false, // 密码为空时显示
      showLoading: false, // 是否加载 loading
      message: "", // 按钮上的加载
      username: "", // 账号
      password: "" // 密码
    };
  },
  beforeDestroy() {
    this.showLoading = false;
    this.message = "";
  },
  methods: {
    focusHandle() {
      this.isUserError = false;
      this.isPassError = false;
    },
    handleLogin() {
      this.showLoading = true;
      this.message = " 登录中...";
      this.axios({
        method: "GET",
        url: "/aapi/getSalt/"+this.username,
      }).then((response) => {
        let salt = response.data+""
        this.axios({
        method: "POST",
        url: "/aapi/login",
        data: {
          "username": this.username,
          "password": md5(this.password+salt)
        }
      }).then((response) => {
        Toast.success('login success');
        this.showLoading = false;
        this.$router.push("/gerenzhuye");
      }).catch((error)=>{
        this.showLoading = false;
        if (error.response.status === 405) {
          this.isUserError = true;
          Toast.fail(error.response.data)
        } else if (error.response.status === 406) {
          this.isPassError = true;
          Toast.fail(error.response.data)
        }
      });
      }).catch((error)=>{
        this.showLoading = false;
        if (error.response.status === 405) {
          this.isUserError = true;
          Toast.fail(error.response.data)
        }
      });
    }
  }
};
</script>

<style scoped>
.login_container {
  position: relative;
  padding: 5% 20px;
  display: flex;
  flex-direction: column;
}

.login_container .img {
  width: 150px;
  height: 150px;
  margin: 30px auto;
}

.go_register {
  color: #1989fa;
  font-size: 14px;

}

.go_register:first-child {
  margin-right: 10px;
}

.login_register {
  text-align: right;
  color: #555;
  font-size: 12px;

}


.login_container .login_btn {
  margin-top: 50px;
}

.login_container .login_zhe {
  position: fixed;
  bottom: 0;
  left: 0;
  text-align: center;
  width: 100%;

}

.login_zhe p:first-child {
  font-size: 14px;
}

.login_zhe p:nth-child(2) {
  color: #888;
}
.child-view{
  position: relative;
  left: 0;
  top: 0;
  width: inherit;
  height: inherit;
  transition: all .5s cubic-bezier(.55, 0, .1, 1);
}
</style>